<template>
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="breadcrumb-list">
                        <nav aria-label="breadcrumb" class="page-breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <nuxt-link to="/teacher">首页</nuxt-link>
                                </li>

                                <li class="breadcrumb-item" aria-current="page">
                                    <nuxt-link to="/teacher/course">我的课程</nuxt-link>

                                </li>
                                <li class="breadcrumb-item" aria-current="page">
                                    <nuxt-link to="/teacher/course-detail?id=10">Scratch启蒙</nuxt-link>

                                </li>
                                <li class="breadcrumb-item" aria-current="page">教学单元1</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="inner-banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="instructor-wrap border-bottom-0">
                        <div class="about-instructor align-items-center">
                            <div class="abt-instructor-img">
                                <a href="instructor-profile.html">
                                    <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                                </a>
                            </div>
                            <div class="instructor-detail me-3">
                                <h5><a href="instructor-profile.html">课程名称</a></h5>
                                <p>第五单元</p>
                            </div>
                        </div>
                    </div>
                    <h2>教学单元名称</h2>
                    <p>教学单元介绍</p>
                    <div class="course-info d-flex align-items-center border-bottom-0 m-0 p-0">
                        <div class="cou-info">
                            <p>知识点：28个</p>
                        </div>
                        <div class="cou-info">
                            <p>建议时长：90分钟</p>
                        </div>
                        <div class="cou-info">
                            <p>代码量：300行</p>
                        </div>
                        <div class="cou-info">
                            <p style="width: 58px;">难度:</p>
                            <div class="rating mb-0">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star"></i>
                                <span class="d-inline-block average-rating"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="page-content course-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-0 px-0">
                    <div class="category-tab tickets-tab-blk">
                        <ul class="nav nav-justified">
                            <li v-for="item in tabs" :key="item.id" class="nav-item" @click="curTab = item.id">
                                <a href="javaScript:void(0);" class="nav-link"
                                    :class="{ 'active': curTab == item.id }">{{
                                        item.name }}</a>
                            </li>
                        </ul>
                    </div>

                    <div class="p-0" v-show="curTab == 'refDocument'">


                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">教学目标</h5>
                                <p>Very well thought out and articulate communication. Clear milestones, deadlines and
                                    fast
                                    work. Patience. Infinite patience. No shortcuts. Even if the client is being
                                    careless.
                                    Some quick example text to build on the card title and bulk the card's content
                                    Moltin
                                    gives you platform.</p>
                                <p class="mb-0">As a highly skilled and successfull product development and design
                                    specialist with more than 4 Years of My experience lies in successfully
                                    conceptualizing,
                                    designing, and modifying consumer products specific to interior design and home
                                    furnishings.</p>
                            </div>
                        </div>
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">教学重点</h5>
                                <p>Very well thought out and articulate communication. Clear milestones, deadlines and
                                    fast
                                    work. Patience. Infinite patience. No shortcuts. Even if the client is being
                                    careless.
                                    Some quick example text to build on the card title and bulk the card's content
                                    Moltin
                                    gives you platform.</p>
                                <p class="mb-0">As a highly skilled and successfull product development and design
                                    specialist with more than 4 Years of My experience lies in successfully
                                    conceptualizing,
                                    designing, and modifying consumer products specific to interior design and home
                                    furnishings.</p>
                            </div>
                        </div>
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">教学难点</h5>
                                <p>Very well thought out and articulate communication. Clear milestones, deadlines and
                                    fast
                                    work. Patience. Infinite patience. No shortcuts. Even if the client is being
                                    careless.
                                    Some quick example text to build on the card title and bulk the card's content
                                    Moltin
                                    gives you platform.</p>
                                <p class="mb-0">As a highly skilled and successfull product development and design
                                    specialist with more than 4 Years of My experience lies in successfully
                                    conceptualizing,
                                    designing, and modifying consumer products specific to interior design and home
                                    furnishings.</p>
                            </div>
                        </div>
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">课时安排</h5>
                                <p>Very well thought out and articulate communication. Clear milestones, deadlines and
                                    fast
                                    work. Patience. Infinite patience. No shortcuts. Even if the client is being
                                    careless.
                                    Some quick example text to build on the card title and bulk the card's content
                                    Moltin
                                    gives you platform.</p>
                                <p class="mb-0">As a highly skilled and successfull product development and design
                                    specialist with more than 4 Years of My experience lies in successfully
                                    conceptualizing,
                                    designing, and modifying consumer products specific to interior design and home
                                    furnishings.</p>
                            </div>
                        </div>
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">上课准备</h5>
                                <p>Very well thought out and articulate communication. Clear milestones, deadlines and
                                    fast
                                    work. Patience. Infinite patience. No shortcuts. Even if the client is being
                                    careless.
                                    Some quick example text to build on the card title and bulk the card's content
                                    Moltin
                                    gives you platform.</p>
                                <p class="mb-0">As a highly skilled and successfull product development and design
                                    specialist with more than 4 Years of My experience lies in successfully
                                    conceptualizing,
                                    designing, and modifying consumer products specific to interior design and home
                                    furnishings.</p>
                            </div>
                        </div>
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">教学活动</h5>
                                <p>Very well thought out and articulate communication. Clear milestones, deadlines and
                                    fast
                                    work. Patience. Infinite patience. No shortcuts. Even if the client is being
                                    careless.
                                    Some quick example text to build on the card title and bulk the card's content
                                    Moltin
                                    gives you platform.</p>
                                <p class="mb-0">As a highly skilled and successfull product development and design
                                    specialist with more than 4 Years of My experience lies in successfully
                                    conceptualizing,
                                    designing, and modifying consumer products specific to interior design and home
                                    furnishings.</p>
                            </div>
                        </div>
                    </div>

                    <div class="p-0" v-show="curTab == 'refPPT'">
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">参考PPT</h5>
                                <p>找个线上的web-PPT插件</p>

                            </div>
                        </div>
                    </div>

                    <div class="p-0" v-show="curTab == 'exerise'">
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">必做题</h5>

                                <div class="faq-card" v-for="i in 3">
                                    <h6 class="faq-title">
                                        <a class="collapsed d-flex" data-bs-toggle="collapse" :href="'#faq' + i"
                                            aria-expanded="false">
                                            <span>第{{ i }}题 </span>
                                            <span style="margin-left:auto">选择题</span>
                                        </a>
                                    </h6>
                                    <div :id="'faq' + i" class="collapse" style="">
                                        <div class="faq-detail">
                                            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                                                terry
                                                richardson
                                                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
                                                brunch.
                                                Food
                                                truck quinoa nesciunt laborum eiusmod.</p>
                                            <p>If several languages coalesce, the grammar of the resulting language is
                                                more
                                                simple
                                                and regular than that of the individual languages. The new common
                                                language
                                                will be
                                                more simple and regular than the existing European languages.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">选做题</h5>

                                <div class="faq-card" v-for="i in 3">
                                    <h6 class="faq-title">
                                        <a class="collapsed d-flex" data-bs-toggle="collapse" :href="'#faq' + i"
                                            aria-expanded="false">
                                            <span>第{{ i }}题 </span>
                                            <span style="margin-left:auto">选择题</span>
                                        </a>
                                    </h6>
                                    <div :id="'faq' + i" class="collapse" style="">
                                        <div class="faq-detail">
                                            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                                                terry
                                                richardson
                                                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
                                                brunch.
                                                Food
                                                truck quinoa nesciunt laborum eiusmod.</p>
                                            <p>If several languages coalesce, the grammar of the resulting language is
                                                more
                                                simple
                                                and regular than that of the individual languages. The new common
                                                language
                                                will be
                                                more simple and regular than the existing European languages.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">挑战题</h5>

                                <div class="faq-card" v-for="i in 3">
                                    <h6 class="faq-title">
                                        <a class="collapsed d-flex" data-bs-toggle="collapse" :href="'#faq' + i"
                                            aria-expanded="false">
                                            <span>第{{ i }}题 </span>
                                            <span style="margin-left:auto">选择题</span>
                                        </a>
                                    </h6>
                                    <div :id="'faq' + i" class="collapse" style="">
                                        <div class="faq-detail">
                                            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                                                terry
                                                richardson
                                                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
                                                brunch.
                                                Food
                                                truck quinoa nesciunt laborum eiusmod.</p>
                                            <p>If several languages coalesce, the grammar of the resulting language is
                                                more
                                                simple
                                                and regular than that of the individual languages. The new common
                                                language
                                                will be
                                                more simple and regular than the existing European languages.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="p-0" v-show="curTab == 'report'">
                        <div class="card review-sec">
                            <div class="card-body">
                                <h5 class="subs-title">教师反馈</h5>
                                <div class="review-item" v-for="i in 5" :key="i">
                                    <div class="instructor-wrap border-0 m-0">
                                        <div class="about-instructor">
                                            <div class="abt-instructor-img">
                                                <img src="assets/img/user/user1.jpg" alt="img" class="img-fluid">
                                            </div>
                                            <div class="instructor-detail">
                                                <h5>张老师</h5>
                                                <p>2024-25-14 19:30:21</p>
                                            </div>
                                        </div>
                                        <div class="rating">
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star"></i>
                                        </div>
                                    </div>
                                    <p class="rev-info">最近表现很好，继续加油！</p>
                                </div>

                            </div>
                        </div>


                        <div class="card comment-sec">
                            <div class="card-body">
                                <h5 class="subs-title">添加反馈</h5>
                                <form>


                                    <div class="form-group">
                                        <textarea rows="4" class="form-control" placeholder="请输入反馈内容"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <div class="rating">
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star filled"></i>
                                            <i class="fas fa-star"></i>
                                        </div>
                                    </div>
                                    <div class="submit-section">
                                        <button class="btn submit-btn" type="submit">提交反馈</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="p-0" v-show="curTab == 'thinking'">
                        <div class="card overview-sec">
                            <div class="card-body">
                                <h5 class="subs-title">思维</h5>
                                <p>Very well</p>
                            
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar-sec">
                        <div class="video-sec vid-bg">
                            <div class="card">
                                <div class="card-body">
                                    <a href="https://www.youtube.com/embed/1trvO6dqQUI" class="video-thumbnail"
                                        data-fancybox="">
                                        <div class="play-icon">
                                            <i class="fa-solid fa-play"></i>
                                        </div>
                                        <img class="" src="assets/img/video.jpg" alt="">
                                    </a>
                                    <div class="video-details">
                                        <div class="course-fee">
                                            <h2>备课视频</h2>
                                            <p>视频时长：10分钟</p>
                                        </div>
                                        <!-- <div class="row gx-2">
                                            <div class="col-md-6">
                                                <a href="course-wishlist.html" class="btn btn-wish w-100"><i
                                                        class="feather-heart"></i> Add to Wishlist</a>
                                            </div>
                                            <div class="col-md-6">
                                                <a href="javascript:;" class="btn btn-wish w-100"><i
                                                        class="feather-share-2"></i> Share</a>
                                            </div>
                                        </div> -->
                                        <a href="checkout.html" class="btn btn-enroll w-100">查看作品</a>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card category-widget blog-widget">
                            <div class="card-header">
                                <h4 class="card-title">单元目标</h4>
                            </div>
                            <div class="card-body">
                                <ul class="categories">
                                    <li v-for="i in 5" :key="i"><a href="javascript:void(0);"><i
                                                class="fas fa-angle-right"></i> Business </a>
                                    </li>
                                </ul>
                            </div>
                        </div>


                        <div class="card tags-widget blog-widget tags-card">
                            <div class="card-header">
                                <h4 class="card-title" data-sider-select-id="936928d0-6fdf-43b8-b710-e301a6cdbfe3">知识点
                                </h4>
                            </div>
                            <div class="card-body">
                                <ul class="tags">
                                    <li><a href="javascript:void(0);" class="tag">HTML</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Java Script</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Css</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Jquery</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Java</a></li>
                                    <li><a href="javascript:void(0);" class="tag">React</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="card tags-widget blog-widget tags-card">
                            <div class="card-header">
                                <h4 class="card-title" data-sider-select-id="936928d0-6fdf-43b8-b710-e301a6cdbfe3">核心指令
                                </h4>
                            </div>
                            <div class="card-body">
                                <ul class="tags">
                                    <li><a href="javascript:void(0);" class="tag">HTML</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Java Script</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Css</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Jquery</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Java</a></li>
                                    <li><a href="javascript:void(0);" class="tag">React</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="card category-widget blog-widget">
                            <div class="card-header">
                                <h4 class="card-title">教学重点</h4>
                            </div>
                            <div class="card-body">
                                <ul class="categories">
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Business </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Courses </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Education </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="card category-widget blog-widget">
                            <div class="card-header">
                                <h4 class="card-title">教学难点</h4>
                            </div>
                            <div class="card-body">
                                <ul class="categories">
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Business </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Courses </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Education </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="card category-widget blog-widget">
                            <div class="card-header">
                                <h4 class="card-title">注意事项</h4>
                            </div>
                            <div class="card-body">
                                <ul class="categories">
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Business </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Courses </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Education </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

</template>
<style scoped>
.category-tab.tickets-tab-blk .nav-justified .nav-item {
    flex-basis: 108px;
}
</style>
<script setup>
// course, student, exerise, setting
const tabs = ref([
    {
        id: "refDocument",
        name: '参考教案'
    },
    {
        id: "refPPT",
        name: '教学PPT'
    },
    {
        id: "exerise",
        name: '课后习题'
    },
    {
        id: "report",
        name: '课后反馈'
    },
    {
        id: "thinking",
        name: '思维拓展'
    }])
const curTab = ref('refDocument')
</script>
